

<template>
  <div id="app">
    <div class="content">
    <div>
            标题：<input type="text" placeholder="请输入代办标题" v-model="title" />
            日期：<input class="rili" type="date" placeholder="年/月/日" v-model="date" />
    </div>
    <br>
    <div>
        <button style="margin-right: 10px;" @click="submit">提交</button>
        <button @click="Add">添加</button>
    </div>
    <!-- 写一个表格，表头标题有：标题，日期，操作 -->
    <div class="table" >
      
        <table border="1" cellspacing="0" cellpadding="0" width="100%">
         <tr>
            <th>标题</th>
            <th>日期</th>
            <th>操作</th>
         </tr>
         <div class="container"  style="height:280px;overflow-y: auto;" @scroll="onScroll">
         <div class="scroll"  :style="{height:list.length*30+'px'}" >
          <div class="placeholder" :style="{height: currentIndex * 30 + 'px'}"></div>
         <tr v-for="item in displayList" :key="item.id" style="width:398px">
            <td>{{ item.title }}</td>
            <td>{{ item.date }}</td>
            <td style="width:100px">
                <button style="margin-right: 10px;" @click="edit(item.id)">编辑</button>
                <button @click="del(item.id)">删除</button>
            </td>
         </tr>
        </div>
      </div>
       </table>
   
    </div>
    
    </div>
    
  </div>
</template>

<script >
// import TablePage from "./components/TablePage.vue"
export default {
  name: 'App',
  components: {
    // TablePage
  },
  data() {
    return {
        title:'',
        date:'',
        list:JSON.parse(localStorage.getItem('list')) || [],
        pid:'',
        currentIndex:0
    }
  },
  computed:{
    displayList(){
      return this.list.slice(this.currentIndex,this.currentIndex+10)
    }
  },
  mounted() {},
  methods: {
    // 提交数据
    submit(){
      if(!this.title.trim || !this.date) return alert('请按照数据格式填写')
      console.log('pid',this.pid);
      if(this.pid){
        this.title = ''
        this.date = ''
        this.pid = ''
        return
      }
      this.list.push({
        title:this.title,
        date:this.date,
        id:+new Date()
      })
      this.title = ''
      this.date = ''
      localStorage.setItem('list',JSON.stringify(this.list))
    },
    // 编辑数据
    edit(id){
     
      const newList = this.list.filter(item => item.id ===id)
      
      this.title=newList[0].title
      this.date=newList[0].date
      // 修改数据的id
      this.pid = id
      
    },
    // 删除数据
    del(id){
      this.list = this.list.filter(item => item.id !==id)
      localStorage.setItem('list',JSON.stringify(this.list))
    },
    // 添加数据
    Add(){
      console.log('pid',this.pid);
      // 如果pid不存在值，就是提交状态，就不需要添加数据
      if(!this.pid) {
        this.title = ''
        this.date = ''
        return
      }
      this.list = this.list.map(item => {
        if(item.id === this.pid){
          item.title = this.title
          item.date = this.date
        }
        return item
      })
      localStorage.setItem('list',JSON.stringify(this.list))
      this.title = ''
      this.date = ''
      this.pid = ''
    },
    onScroll(e){
      const scrollTop = e.target.scrollTop
      this.currentIndex = Math.floor(scrollTop / 30)
      console.log(this.currentIndex);
    }
  }
}
</script>
<style scoped>
.content{
    width: 800px;
   
    text-align: center;
    margin: 0 auto;
}
.table{
    /* width: 300px; */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 200px;
}
</style>
